<template>
  <ul class="navlist">
    <li
      v-for="item in data.navlistdata"
      :key="item.id"
      :class="['item', item.id == avtiveIndex ? 'active' : '']"
      @click="handleActive(item.id)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
import { reactive, ref, watchEffect } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const avtiveIndex = ref(0);
    const data = reactive({
      navlistdata: [
        {
          id: 0,
          name: "首页",
        },
        {
          id: 1,
          name: "玄幻",
        },
        {
          id: 2,
          name: "武侠",
        },
        {
          id: 3,
          name: "都市",
        },
        {
          id: 4,
          name: "历史",
        },
        {
          id: 5,
          name: "侦探",
        },
        {
          id: 6,
          name: "网游",
        },
        {
          id: 7,
          name: "科幻",
        },

        {
          id: 8,
          name: "排行榜",
        },
        {
          id: 9,
          name: "全本",
        },
        {
          id: 10,
          name: "书架",
        },
      ],
    });

    const handleActive = (index) => {
      avtiveIndex.value = index;
      if (index >= 0 && index < 8) {
        router.push(`/home/type/${index}`);
      }else if (index ==8) {
        router.push(`/home/top`);
      }else if (index ==9) {
        router.push(`/home/full`);
      } else if (index ==10) {
        router.push(`/home/collections`);
      }
    };

    // 监听路由
    // watchEffect(router, (val) => {
    //   console.log(val);
    // });

    return {
      data,
      avtiveIndex,
      handleActive,
    };
  },
};
</script>

<style lang="scss" scoped>
.navlist {
  display: flex;
  height: 42px;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  background-color: #88c6e5;
  .item {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: #fff !important;
  }
}

.active {
  background-color: rgb(58, 130, 189);
  color: #fff;
}
</style>